// 全局变量
// 导入全局变量
@import './variables.less';

// 额外的全局样式变量
@gap-xs: @spacing-xs;
@gap-sm: @spacing-sm;
@gap-md: @spacing-md;
@gap-lg: @spacing-lg;
@gap-xl: @spacing-xl;
@gap-xxl: @spacing-xxl;

// 通用混合
.padding(@top: 0, @right: 0, @bottom: 0, @left: 0) {
  padding-top: @top;
  padding-right: @right;
  padding-bottom: @bottom;
  padding-left: @left;
}

.margin(@top: 0, @right: 0, @bottom: 0, @left: 0) {
  margin-top: @top;
  margin-right: @right;
  margin-bottom: @bottom;
  margin-left: @left;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// 响应式断点使用variables.less中定义的值

// 响应式混合
// 由于Less语法与Vite兼容性问题，暂时简化响应式混合器

@media-xs {
  @media (max-width: @screen-xs) {
    // 响应式样式将在调用处直接定义
  }
}

@media-sm {
  @media (max-width: @screen-sm) {
    // 响应式样式将在调用处直接定义
  }
}

@media-md {
  @media (max-width: @screen-md) {
    // 响应式样式将在调用处直接定义
  }
}

@media-lg {
  @media (max-width: @screen-lg) {
    // 响应式样式将在调用处直接定义
  }
}

@media-xl {
  @media (max-width: @screen-xl) {
    // 响应式样式将在调用处直接定义
  }
}
